$blue-theme: #377bc9;
$blue-theme-hover: #00337a;
$blue-theme-rgb: rgba($color: $blue-theme, $alpha: 0.2);
$blue-sider-bg: #00337a;
$blue-sider-active-bg: #5e9ce7;
$blue-disable-color: #6c757d;
$blue-success-color: #4EB4A5;
$blue-danger-color: #dc3545;
$blue-warning-color: #E3AA75;
$blue-info-color: #4B98CF;
$blue-light-border-color: #DCE0E2;
$blue-dark-color: #1A3142;
$blue-gray-color:#909399;
$blue-theme-rgb1: rgba($color: $blue-theme, $alpha: 0.05);

body[data-theme='blue'] {
    // 字体颜色
  .info{
      color: $blue-info-color !important;
    }
  .warning{
    color: $blue-warning-color !important;
  }
  .danger{
    color: $blue-danger-color !important;
  }
  .success{
    color: $blue-success-color !important;
  }
  .primary {
    color: rgba($color: #1890ff, $alpha: 0.7) !important;
  }
  .gray {
    color: $blue-gray-color;
  }
  // 小字
  .warning-small{
    color: $blue-warning-color;
    font-size: 12px;
  }
// 按钮
.ant-btn {
    &:active{
      color: $blue-theme;
      border-color: $blue-theme;
    }
    border-radius: 20px;
    &:hover{
      border-color: $blue-theme;
      color: $blue-theme;
    }
    // 被禁用的按钮
    &[disabled] {
      background-color: #f5f5f5 !important;
      border-color: #d9d9d9 !important;
      &:hover{
        color:rgba(0, 0, 0, 0.25)!important;
      }
    }
    &.ant-btn-primary{
      background-color: $blue-theme;
      border-color: $blue-theme;
      &:hover{
        color: #fff;
      }
    }
    &.ant-btn-danger{
      background-color: $blue-danger-color;
      border-color: $blue-danger-color;
      &:hover{
        color: #fff;
      }
    }
    &.ant-btn-link{
      // 被禁用的文字按钮样式
      &[disabled] {
        background-color: transparent !important;
        border-color: transparent !important;
        &:hover{
          span{
            color: $blue-dark-color !important;
          }
        }
      }
      color: $blue-dark-color;
      &:hover{
        border-color: transparent;
        span{
          color: $blue-theme;
        }
      }
    }
  } 

  // 按钮组
  .ant-radio-group{
    .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before{
      background-color: $blue-theme;
    }
    span {
      color: $blue-theme;
    }
    .ant-radio-button-wrapper:first-child{
      border-radius: 20px 0 0 20px;
    }
    .ant-radio-button-wrapper:last-child{
      border-radius: 0 20px 20px 0;
    }
    .ant-radio-button-wrapper-checked {
      border: 1px solid $blue-theme;
    }
  }

  // 标签
.ant-tag{
    &.info{
      background-color: #fff !important;
      border-color: $blue-light-border-color;
    }
    &.success{
      background-color: $blue-success-color;
      border-color: $blue-success-color;
      color: #fff !important;
    }
    &.danger{
      background-color: $blue-danger-color;
      border-color: $blue-danger-color;
      color: #fff !important;
    }
    &.warning{
      background-color: $blue-warning-color;
      border-color: $blue-warning-color;
      color: #fff !important;
    }
    &.gray {
      background-color: $blue-gray-color;
      border-color: $blue-gray-color;
      color: #fff !important;
    }
    &.dark {
      background-color: $blue-dark-color;
      border-color: $blue-dark-color;
      color: #fff !important;
    }
  }
//   侧边栏
  .ant-layout-sider{
      border-right: 1px solid rgba($color: #eee, $alpha: 0.1);
      background: url('../assets/images/blue/sider-bg.png');
      .side-menu {
          // background: url('../assets/images/blue/sider-bg.png');
          background: transparent;
      }
  }
  //侧边栏菜单
  .side-menu{
    .ant-menu-submenu{
        margin: 15px 0;
      .ant-menu{
        .ant-menu-item{
            margin: 0;
            background: $blue-sider-bg;
          &.ant-menu-item-selected{
            background-color: $blue-sider-active-bg;
          }
        }
      }
    }
  }
  .ant-menu-item{
      &.ant-menu-item-selected{
        background-color: $blue-sider-active-bg;
        &::after{
          background-color: $blue-theme-hover;
        }
      }
  }
  // 侧边栏菜单收起
  .ant-menu-submenu-popup {
    &.ant-menu-dark { 
      .ant-menu-item-selected {
        background-color: $blue-sider-active-bg
      }
    }
  }
  // 表格
  .ant-table {
    //   表头
    .ant-table-header {
        thead {
          tr {
            th {
              background: $blue-theme-rgb;
              font-weight: bold;
              border-right: 1px solid #eee;
              &:hover {
                background: $blue-theme-rgb;
              }
            }
          }
        }
    }
    // 表体
    .ant-table-body {
        tbody {
          tr {
            th {
              border-right: 1px solid #dcdfe6;
            }
          }
        }
    }
  }
  .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
    background-color: $blue-theme-rgb1;
  }
  .ant-table{
    .ant-table-content{
      thead{
        tr{
          th{
            background-color: $blue-theme-rgb !important;
          }
        }
      }
      // .ant-table-fixed{
        tbody{
          tr{
            td:last-child{
              .ant-btn.ant-btn-link{
                margin-right: 0;
                &[disabled]{
                  i{
                    color: $blue-gray-color !important;
                  }
                }
              }
              i{
                font-size: 18px;
                color: $blue-info-color;
              }
            }
          }
        }
      // }
    }
  }
  
  // 分页
  .ant-pagination{
    .ant-pagination-item-link {
      border-radius: 20px;
      &:hover {
        border-color: $blue-theme;
      }
    }
    .ant-pagination-item,.ant-pagination-prev,.ant-pagination-next{
      border-radius: 20px;
      &:hover{
        border-color: $blue-theme;
      }
      a{
        &:hover{
          color: $blue-theme;
        }
      }
    }
    .ant-pagination-item-active{
        border-color: $blue-theme;
        a{
          color: $blue-theme;
        }
    }
    .ant-select-selection {
      border-radius: 20px;
      &:hover{
        border-color: $blue-theme;
      }
    }
  }
  
  // 输入框
  .ant-input{
    border-radius: 20px;
    &:hover{
      border-color: $blue-theme;
    }
    &:focus{
      border-color: $blue-theme;
      box-shadow: 0 0 0 2px $blue-theme-rgb;
    }
  }
  // 数字输入框
  .ant-input-number{
    border-radius: 20px;
    &:hover{
      border-color: $blue-theme;
    }
    &:focus{
      border-color: $blue-theme;
      box-shadow: 0 0 0 2px $blue-theme-rgb;
    }
    .ant-input-number-handler-wrap{
      border-radius: 0 20px 20px 0;
    }
  }
  // 下拉框
  .ant-select-selection{
    border-radius: 20px;
  }
  .ant-select-focused .ant-select-selection, .ant-select-selection:focus, .ant-select-selection:active{
    border-color: $blue-theme !important;
      box-shadow: none;
  }
  .ant-form-item-control{
    .ant-select-selection {
      border-radius: 20px !important;
      &:hover {
        border-color: $blue-theme;
        box-shadow: 0 0 0 2px $blue-theme-rgb;
      }
    }
    &.has-error{
      .ant-input{
        border-color: $blue-danger-color;
        &:hover{
          border-color: $blue-danger-color;
        }
        &:focus{
          border-color: $blue-danger-color;
        }
      }
    }
  }
  
  // 开关
  .ant-switch{
    &.ant-switch-checked{
      background-color: $blue-theme;
    }
  }
  .header-text{
    &:hover{
      color: $blue-theme;
    }
  }
  
  // 时间选择器
  .ant-calendar-picker:hover .ant-calendar-picker-input:not(.ant-input-disabled){
    border-color: $blue-theme;
  }
  .ant-calendar{
    .ant-calendar-date{
        &:hover{
            background-color: $blue-theme-rgb;
        }
    }
    .ant-calendar-date-panel{
      .ant-calendar-selected-day{
        .ant-calendar-date{
          background-color: $blue-theme;
        }
      }
      .ant-calendar-today{
        .ant-calendar-date{
          // background-color: $defult-color;
          color: $blue-theme;
          border-color: $blue-theme;
        }
        &.ant-calendar-selected-day{
          .ant-calendar-date{
            // background-color: $defult-color;
            color: #fff;
            border-color: $blue-theme;
          }
        }
      }
    }
    .ant-calendar-footer-btn{
      .ant-calendar-time-picker-btn{
        color: $blue-theme;
        &.ant-calendar-time-picker-btn-disabled{
          color: rgba(0, 0, 0, 0.25);
          &:hover{
            cursor: not-allowed;
          }
        }
      }
      .ant-calendar-ok-btn{
        background-color: $blue-theme;
        border-color: $blue-theme;
        &.ant-calendar-ok-btn-disabled{
          color: rgba(0, 0, 0, 0.25);
          background-color: #f5f5f5;
          border-color: #d9d9d9;
          &:hover{
            cursor: not-allowed;
          }
        }
      }
    }
    // 选择时间
    .ant-calendar-time-picker-select{
      li{
        &:hover{
          background: $blue-theme-rgb;
        }
      }
    }
    // 快捷时间范围按钮
    .ant-btn{
      &.isActive{
        color: $blue-theme;
        border-color: $blue-theme;
      }
    }
  }
    // 时间范围区间
  .ant-calendar-range .ant-calendar-in-range-cell::before{
    background: $blue-theme-rgb;
  }
  // 抽屉
  .ant-drawer-content-wrapper {
    .ant-drawer-content {
      .ant-drawer-wrapper-body {
        .ant-drawer-header {
          background: $blue-theme;
          .ant-drawer-title {
            color: #ffffff;
          }
          & button {
            color: #ffffff;
          }
        }
      }
    }
  }
//   抽屉底部按钮
.drawerFooter {
    border-color: $blue-theme;
    background: #ffffff;
  } 
// 内容区
.layout-content{
  background: url('../assets/images/blue/content-bg.png');
  .wrap{
      background: rgba($color: #fff, $alpha: 0.9);
      overflow-y: scroll;
      box-shadow: 5px 3px 0px rgba($color: #999, $alpha: 0.5);
      .filter{
        border-color: $blue-theme;
      }
  }
}

// header头部
.app-header{
  // tab页面
.ant-tabs {
  .ant-tabs-nav-wrap{
    .ant-tabs-tab{
        background: rgba($color: #fff, $alpha: 0);
        border-color: rgba($color: #fff, $alpha: 0.5);
        color: #fff;
        i{
          color: #fff;
          &:hover{
              color: $blue-theme-hover;
          }
        }
      &:hover{
        color: $blue-theme-hover;
      }
      &.ant-tabs-tab-active{
        background: rgba($color: #fff, $alpha: 0.9);
        color: $blue-theme;
        i{
          color: $blue-theme;
        }
      }
    }
  }
}
  background: url('../assets/images/blue/navbar-bg.png');
  i{
      color: #fff;
  }
  .user-header{
      span{
          color: #fff;
          &:hover{
              color: $blue-theme-hover;
          }
      }
  }
.trigger{
  &:hover{
      color: $blue-theme;
  }
}
}

// 登录页面
.login-wrapper{
  background-image: url('./images/blue/login-bg.png');
  .server-ip{
      color: #fff;
      &:hover{
        // color: $blue-theme;
      }
    }
  .login-card{
    background: rgba($color: #fff, $alpha: 0.2);
    box-shadow: 0px 0px 100px rgba($color: $blue-theme, $alpha: 0.1);
  }
  .btn-login{
    background: rgba($color: $blue-theme-hover, $alpha: 0.8);
  }
}
// 下拉菜单组件
.ant-dropdown-menu{
.ant-dropdown-menu-item{
  &:hover{
    background-color: $blue-theme-rgb;
  }
}
}
  // loading
  @keyframes loading {
    0%{
      transform: scaleZ(0deg);
    }
    50%{
      transform: scaleZ(180deg);
    }
    100%{
      transform: rotateZ(360deg);
    }
  }
// loading
  .ant-spin{
    .ant-spin-dot-spin{
      background: url('./images/logo_small.png') no-repeat;
      background-size: cover;
      animation: loading 1.5s;
      animation-iteration-count: infinite;
      i{
        // display: none;
        background: transparent;
      }
    }
  }

// 复选框
.ant-checkbox:hover{
  &.ant-checkbox-checked{
    .ant-checkbox-inner{
      border-color: $blue-theme;
    }
  }
  .ant-checkbox-inner{
    border-color: $blue-theme;
  }
}
.ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner::after{
  border-color: #ffffff;
}
.ant-checkbox-indeterminate .ant-checkbox-inner::after{
  background-color: $blue-theme;
}
.ant-checkbox-checked:hover .ant-checkbox-inner,
.ant-checkbox-indeterminate:hover .ant-checkbox-inner{
  border-color: $blue-theme;
}
  .ant-checkbox-checked .ant-checkbox-inner{
    background-color: $blue-theme;
    border-color: $blue-theme;
  }
// 树形复选框
.ant-tree-checkbox:hover .ant-tree-checkbox-inner{
  border-color: $blue-theme;
}
  .ant-tree-checkbox-checked .ant-tree-checkbox-inner{
    background-color: $blue-theme;
    border-color: $blue-theme;
    &:hover{
      border-color: $blue-theme;
    }
  }
  .ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner{
    &::after{
      background-color: $blue-theme;
    }
  }
  // element树形复选框
  .el-tree{
    .el-checkbox__input.is-checked .el-checkbox__inner,.el-checkbox__input.is-indeterminate .el-checkbox__inner{
      background-color: $blue-theme;
      border-color: $blue-theme;
    }
    .el-checkbox__input.is-focus .el-checkbox__inner{
      border-color: $blue-theme;
    }
    .el-checkbox__inner{
      width: 16px;
      height: 16px;
      &:hover{
        border-color: $blue-theme;
      }
      &::before{
        height: 4px;
      }
      &::after{
        left: 5px;
        top: 2px;
        border-width: 2px;
      }
    }
  }

  // 单选按钮
  .ant-radio-wrapper{
    .ant-radio{
      .ant-radio-inner{
        &::after{
          background-color: $blue-theme;
        }
        border-color: $blue-theme;
      }
    }
  }
  // 标签页
  .ant-tabs-nav .ant-tabs-tab{
    &.ant-tabs-tab-active{
      color: $blue-theme;
    }
    &:hover{
      color: $blue-theme;
    }
  }
  .ant-tabs-ink-bar{
    background-color: $blue-theme;
  }
  // 模态框
  .ant-modal{
    .ant-modal-close{
      i{
        color: #ffffff;
      }
    }
    .ant-modal-header{
      background-color: $blue-theme;
      border-bottom-color: $blue-theme;
      .ant-modal-title{
        color: #ffffff;
      }
    }
    .ant-modal-footer {
      border-top-color: $blue-theme;
    }
  }
  // 目录树
  .file-layout{
    .filter{
      border-color: $blue-theme;
    }
  }
  // 列表圆点
  .listSpot{
    width: 10px;
    height: 10px;
    background: $blue-theme;
    border-radius: 5px;
    margin-top: 6px;
  }

  // 上传组件样式
  .ant-upload button{
    border-radius: 0px 20px 20px  0px;
    background-color: $blue-theme;
    color: #fff;
    &:hover{
      background-color: $blue-theme;
      color: #fff;
    }
  }
  .upload-input{
    &:hover{
      border: 1px solid #d9d9d9;
      border-right: none;
    }
  }
}

